<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">

  <style>
    textarea {
      width: 100%;
      height: 100%;
      border: none;
      margin: 0;
      padding: 0;
      display: block;
      resize: none;
      outline: none;
      overflow: auto;
    }
    .btn_list {
      position: absolute;
      /* bottom: -25px;
      left: 0; */
    }
    .btn_list button {

    }
    .edit-td {
      position: relative;
      padding: 0;
    }
    td {
      /* overflow: auto; */
    }
  </style>
</head>

<body>
  <link rel="stylesheet" href="bagua.css">


  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>

  <table id="bagua-table">
    <tr>
      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
    </tr>
    <tr>
      <td class="nw"><strong>Northwest</strong>
        <br>Metal
        <br>Silver
        <br>Elders
      </td>
      <td class="n"><strong>North</strong>
        <br>Water
        <br>Blue
        <br>Change
      </td>
      <td class="ne"><strong>Northeast</strong>
        <br>Earth
        <br>Yellow
        <br>Direction
      </td>
    </tr>
    <tr>
      <td class="w"><strong>West</strong>
        <br>Metal
        <br>Gold
        <br>Youth
      </td>
      <td class="c"><strong>Center</strong>
        <br>All
        <br>Purple
        <br>Harmony
      </td>
      <td class="e"><strong>East</strong>
        <br>Wood
        <br>Blue
        <br>Future
      </td>
    </tr>
    <tr>
      <td class="sw"><strong>Southwest</strong>
        <br>Earth
        <br>Brown
        <br>Tranquility
      </td>
      <td class="s"><strong>South</strong>
        <br>Fire
        <br>Orange
        <br>Fame
      </td>
      <td class="se"><strong>Southeast</strong>
        <br>Wood
        <br>Green
        <br>Romance
      </td>
    </tr>

  </table>

  <script>
    let table = document.getElementById('bagua-table');

    let curTd = null
    let targetElHtml = ''

    table.addEventListener('click', onTableClick)

    function onTableClick (e) {
      const targetEl = e.target

      if (!targetEl || targetEl.tagName !== 'TD' || curTd) return

      curTd = targetEl
      targetElHtml = targetEl.innerHTML

      const targetElWidth = targetEl.offsetWidth
      const targetElHeight = targetEl.offsetHeight
      targetEl.innerHTML = ''
      targetEl.classList.add('edit-td')

      const textArea = document.createElement('textArea')
      textArea.value = targetElHtml
      textArea.style.width = targetElWidth + 'px'
      textArea.style.height = targetElHeight + 'px'
      // targetEl.append(textArea)

      const btnList = document.createElement('div')
      btnList.classList.add('btn_list')

      const okBtn = document.createElement('button')
      okBtn.textContent = 'ok'
      okBtn.addEventListener('click', onOkBtn)
      const cancelBtn = document.createElement('button')
      cancelBtn.textContent = 'cancel'
      cancelBtn.addEventListener('click', onCancelBtn)

      btnList.append(okBtn, cancelBtn)
      // targetEl.append(btnList)

      targetEl.innerHTML = ''
      targetEl.append(textArea, btnList)
    }
    
    function onOkBtn () {
      const textArea = curTd.querySelector('textarea')
      curTd.innerHTML = textArea.value
      resetCurTd()
    }
    function onCancelBtn () {
      curTd.innerHTML = targetElHtml
      resetCurTd()
    }

    function resetCurTd () {
      curTd.classList.remove('edit-td')
      curTd = null
      targetElHtml = ''
    }
    /* your code */
  </script>

</body>

</html>